<template>
  <!-- 武汉待指派欠薪诉求 -->
  <div ref="mainCon" class="container">
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="投诉人" class="row-padding-bottom">
              <el-input
                v-model="filterField.complaintPerName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="联系电话" class="row-padding-bottom">
                <el-input
                  v-model="filterField.complaintPerTel"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <!-- <el-form-item label="部门名称" class="row-padding-bottom">
                    <el-input v-model="filterField.department" placeholder="请输入" clearable></el-input>
                </el-form-item> -->
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="收件日期" class="row-padding-bottom">
                <el-date-picker
                  v-model="applyDate"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- <div class="lineBar"></div>
        <div class="mainConBottom"> -->
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <!-- 查询表格 -->
          <!-- 导出功能文档上没有，本次暂不开发12/18 -->
          <!-- <el-button type="primary" class="commonBut saveBtn funComBut fr" icon="icon iconfont icondaochu"  @click="getExportList">
                    <span class="opetareText" v-sdc>导出</span>
                </el-button> -->
          <el-button
            type="primary"
            class="commonBut saveBtn"
            v-sdc
            @click="openPersonDialog"
            >指定责任人</el-button
          >
          <el-button
            type="primary"
            class="commonBut saveBtn"
            v-sdc
            @click="openTaskDialog"
            >地区任务分发</el-button
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="numId"
            label="编号"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="专线收件时间"
            sortable="custom"
            :formatter="formatTd"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="countyName"
            label="区县"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="streetName"
            label="街道"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="complaintContent"
            label="欠薪诉求"
            :formatter="formatTd"
            width="180"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintContent"
                :columnName="'complaintContent'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintPerName"
            label="市民姓名"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="complaintPerTel"
            label="市民电话"
            :formatter="formatTd"
            width="180"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            width="230"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="epenSingleTask(scope.row)"
                >地区任务分发</el-link
              >
              <el-link type="primary" @click="openSinglePerson(scope.row)"
                >指定责任人</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- 地区任务分发弹窗 -->
      <dialog-area
        :showTaskProp="showTask"
        @callback="handleCloseArea"
        :childData="caseInfo"
        :ids="ids"
      />
      <!-- 指定责任人弹窗 -->
      <dialog-person
        :showTaskProp="showPerson"
        @callback="handleClosePerson"
        :childData="caseInfo"
        :ids="ids"
      />
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import dialogArea from './dialogArea.vue'
import DialogPerson from './dialogPerson.vue'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  components: { dialogArea, DialogPerson },
  name: 'ToAssignCaseWH',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '待指派欠薪诉求',
      filterField: {
        isNoAssign: 1,
        sendAreaId: '',
        complaintPerName: '',
        complaintPerTel: '',
        department: '',
        createTimeStart: '',
        createTimeEnd: '',
      },
      applyDate: [],
      areaId: '',
      tableList: [],
      requestUrl: 'api-r/rbp/list',

      showTask: false,
      taskAreaId: '',
      taskAreaIds: '',
      showPerson: false,
      activedList: [],
      caseInfo: {},
      ids: [],
      advanced: false,
    }
  },
  computed: { ...mapState(['areasOptions']) },
  created() {
    if (this.applyDate) {
      this.filterField.createTimeStart = this.applyDate[0]
      this.filterField.createTimeEnd = this.applyDate[1]
    } else {
      this.filterField.createTimeStart = ''
      this.filterField.createTimeEnd = ''
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
  },
  methods: {
    ...mapActions(['getAreas']),
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.sendAreaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      if (this.applyDate) {
        this.filterField.createTimeStart = this.applyDate[0]
        this.filterField.createTimeEnd = this.applyDate[1]
      } else {
        this.filterField.createTimeStart = ''
        this.filterField.createTimeEnd = ''
      }
      this.$refs.pagination.getTableListData()
    },
    /**
     * @name: 地区任务分发相关
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openTaskDialog() {
      if (this.activedList.length) {
        this.caseInfo = {}
        let arr = []
        this.activedList.forEach((item) => {
          arr.push(item.id)
        })
        this.ids = arr
        console.log(this.ids)
        this.showTask = true
      } else {
        this.$message({
          type: 'warning',
          message: '请勾选需要指定的诉求',
        })
      }
    },
    epenSingleTask(item) {
      this.caseInfo = item
      this.ids = []
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.$refs.pagination.getTableListData()
      }
    },
    /**
     * @name:获取table选中行
     * @param {*}
     * @Author: 471826078@qq.com
     */
    handleSelectionChange(val) {
      console.log(val)
      this.activedList = val
    },
    /**
     * @name: 批量指定责任人相关方法
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openPersonDialog() {
      if (this.activedList.length) {
        this.caseInfo = {}
        let arr = []
        this.activedList.forEach((item) => {
          arr.push(item.id)
        })
        this.ids = arr
        console.log(this.ids)
        this.showPerson = true
      } else {
        this.$message({
          type: 'warning',
          message: '请勾选需要指定的诉求',
        })
      }
    },
    /**
     * @name: 单个指定责任人相关方法
     */
    openSinglePerson(item) {
      this.caseInfo = item
      this.ids = []
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.$refs.pagination.getTableListData()
      }
    },
    getExportList() {
      let {
        isNoAssign,
        sendAreaId,
        complaintPerName,
        complaintPerTel,
        department,
        createTimeStart,
        createTimeEnd,
      } = this.filterField
      let arr = this.applyDate
      if (applyDate) {
        createTimeStart = this.applyDate[0]
        createTimeEnd = this.applyDate[1]
      } else {
        createTimeStart = ''
        createTimeEnd = ''
      }
      // window.location.href =
      //     common.commonApi +
      //     "api-r/rbp/export?sendAreaId=" + sendAreaId +
      //     "&complaintPerName=" +complaintPerName +
      //     "&complaintPerTel=" + complaintPerTel +
      //     "&status=" + status +
      //     "&complaintCompanyName=" + complaintCompanyName +
      //     "&createTimeStart=" + createTimeStart +
      //     "&createTimeEnd=" + createTimeEnd +
      //     "&overDateStart=" + overDateStart +
      //     "&overDateEnd=" + overDateEnd +
      //     "&isDelay=" + isDelay +
      //     "&isRepeatTel=" + isRepeatTel +
      //     "&isRepeatNum=" + isRepeatNum +
      //     "&numId=" + numId +
      //     "&isPerfect=" + isPerfect +
      //     "&isTodayNoPro=" + isTodayNoPro +
      //     "&isToday=" + isToday +
      //     "&isMine=" + isMine +
      //     "&pageNo=" + pageNo +
      //     "&pageSize=" + pageSize +
      //     "&access_token=" +
      //     localStorage.getItem("access_token");
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.mainCon {
  top: 196px;
  padding: 24px 0;
  .lineBar {
    width: 100%;
    height: 10px;
    background-color: #f5f7fa;
  }
  .actions {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #333333;
    margin-bottom: 24px;
    .el-button {
      margin-left: 12px;
    }
  }
  &Bottom {
    padding: 16px 24px 24px;

    .el-button {
      margin-left: 12px;
    }
  }
}
</style>
